<template>
  <ComponentContainerProperty v-model="formData.style">
    <el-form label-width="80px" :model="formData">
      <el-card>
      <el-form-item label="显示会员">
        <el-switch v-model="formData.showVip" />
      </el-form-item>
      <el-form-item label="任务中心">
        <el-switch v-model="formData.showTask" />
      </el-form-item>
      <el-form-item label="任务图标" v-if="formData.showTask">
        <UploadImg v-model="formData.taskIcon" height="50px" width="50px" />
      </el-form-item>
      <el-form-item label="退出按钮">
        <el-switch v-model="formData.showLogout" />
      </el-form-item>
      <el-form-item label="退出图标" v-if="formData.showLogout">
        <UploadImg v-model="formData.logoutIcon" height="50px" width="50px" />
      </el-form-item>
      <el-form-item label="分享按钮">
        <el-switch v-model="formData.showShare" />
      </el-form-item>
      <el-form-item label="分享图标" v-if="formData.showShare">
        <UploadImg v-model="formData.shareIcon" height="50px" width="50px" />
      </el-form-item>
      <el-form-item label="绑定手机">
        <el-switch v-model="formData.showBindPhone" />
      </el-form-item>
      <el-form-item label="显示查看详情">
        <el-switch v-model="formData.showViewDetails" />
      </el-form-item>
      <el-form-item label="查看详情图标" v-if="formData.showViewDetails">
        <UploadImg v-model="formData.viewDetailsIcon" height="50px" width="50px" />
      </el-form-item>
    </el-card>
    </el-form>
  </ComponentContainerProperty>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UserCardProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'

// 用户卡片属性面板
defineOptions({ name: 'UserCardProperty' })

const props = defineProps<{ modelValue: UserCardProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
const activeTab = ref('content')
</script>

<style scoped lang="scss"></style>
